<template>
    <div>
        <!--表格头-->
        <div class="container">
            <!--搜索条件选择-->
            <el-collapse-transition>
                <div class="handle-search" v-show="search">
                    <el-input placeholder="关键词" class="search-input mr" v-model="query.keyword"></el-input>
                                         <el-button icon="el-icon-search" class="mr" @click="reset">重置</el-button>
                    <el-button type="primary" icon="el-icon-search" class="mr" @click="getData">搜索</el-button>
                </div>
            </el-collapse-transition>
            <!--基本操作按钮-->
            <div class="handle-box">
                <el-button
                        type="danger"
                        icon="el-icon-delete"
                        @click="deleteBatch"
                        v-permission="permission.del"
                        title="批量删除"
                >批量删除
                </el-button>
                <el-button
                        type="primary"
                        icon="el-icon-circle-plus-outline"
                        @click="openWin(2,{})"
                        v-permission="permission.create"
                        title="添加"
                >添加
                </el-button>
                <el-button
                        icon="el-icon-search"
                        @click="toggleSearch"
                        class="float-right"
                        title="搜索折叠"
                >
                </el-button>
                <el-button
                        icon="el-icon-refresh"
                        @click="getData"
                        class="float-right"
                        title="刷新"
                >
                </el-button>
                <el-button
                        @click="clearSelect"
                        class="float-right"
                        title="取消选中"
                >{{multipleSelection.length}}条数据选中
                </el-button>
            </div>
            <!--表格数据-->
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    row-key="id"
                    header-cell-class-name="table-header"
                    @row-click="rowClick"
                    @selection-change="selectChange"
                    @sort-change='sort'
            >

                <el-table-column type="selection" :reserve-selection="true" width="55" align="center"></el-table-column>
                     <el-table-column prop="id" label="序号" align="center">
                     </el-table-column>
                     <el-table-column prop="tableName" label="表名" align="center">
                     </el-table-column>
                     <el-table-column prop="tableId" label="表序号" align="center">
                     </el-table-column>
                     <el-table-column prop="adminId" label="管理员序号" align="center">
                     </el-table-column>
                     <el-table-column prop="type" label="类型" align="center">
                     </el-table-column>
                     <el-table-column prop="uri" label="操作地址" align="center">
                     </el-table-column>
                     <el-table-column prop="ip" label="管理员ip" align="center">
                     </el-table-column>
                     <el-table-column prop="requestStr" label="请求数据" align="center">
                     </el-table-column>
                     <el-table-column prop="responseStr" label="响应数据" align="center">
                     </el-table-column>
                     <el-table-column prop="gmtCreate" label="创建时间" align="center">
                             <template slot-scope="scope">{{scope.row.gmtCreate | formatDateShort}}</template>
                     </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="openWin(1,scope.row)"
                                v-permission="permission.update"
                                title="编辑"
                        >编辑
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="deleteSingle(scope.row)"
                                v-permission="permission.del"
                                title="删除"
                        >删除
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-view"
                                class="orange"
                                @click="openWin(3,scope.row)"
                                v-permission="permission.show"
                                title="详情"
                        >详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页信息-->
            <div class="pagination">
                <el-pagination
                        @size-change="sizeChange"
                        @current-change="pageChange"
                        :current-page="query.pageNo"
                        :page-sizes="pageSizes"
                        :page-size="query.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageTotal">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑窗口 -->
        <el-dialog title="编辑" :visible.sync="updateVisible" width="800px" v-permission="permission.update">
            <Update :tId="id" :tForm="form" @closeWin="closeWin" ref="updateDialog"></Update>
        </el-dialog>

        <!-- 添加窗口 -->
        <el-dialog title="添加" :visible.sync="createVisible" width="800px" v-permission="permission.create">
            <Create :tId="id" :tForm="form" @closeWin="closeWin" ref="createDialog"></Create>
        </el-dialog>

        <!-- 详情窗口 -->
        <el-dialog title="详情" :visible.sync="showVisible" width="800px" v-permission="permission.show">
            <Show :tId="id" :tForm="form" @closeWin="closeWin"  ref="showDialog"></Show>
        </el-dialog>

    </div>
</template>

<script>
    import moment from 'moment';
    import Update from './Update';
    import Create from './Create';
    import Show from './Show';

    export default {
        name: 'UserOpretationLog',
        components:{
            Update,
            Create,
            Show
        },
        data() {
            return {
                // 相关操作权限
                permission: {
                    update: 'user:userOpretationLog:update',
                    del: 'user:userOpretationLog:del',
                    create: 'user:userOpretationLog:create',
                    show: 'user:userOpretationLog:show'
                },
                queryUrl: '/user/restpage/userOpretationLog/query',//查询地址
                deleteUrl: '/user/restpage/userOpretationLog/del',//删除地址
                //查询条件
                query: {
                    pageNo: 1,//页码
                    pageSize: 20,//数量
                    order: 'id',//排序字段
                    sort: 'desc'//排序方式
                },
                search:true,//是否显示搜索框
                tableData: [],//当前页的数据
                pageTotal: 0,//数据总数量
                pageSizes:[10,20,50,100,1000],//页数量选择
                multipleSelection: [],//选中的数据
                updateVisible: false,//是否编辑
                createVisible: false,//是否添加
                showVisible: false,//是否查看详情
                form: {}, //相关处理数据
                id:-1 //处理数据的Id
            };
        },
        created() {
            this.getData();
        },
        methods: {
            // 获取数据
            getData() {
                this.$http.get(this.queryUrl, this.query).then(res => {
                    //查询成功
                    this.tableData = res.rows;
                    this.pageTotal = res.total;
                });
            },
            //搜索条件重置
            reset(){
                this. query= {
                    pageNo: 1,//页码
                    pageSize: 20,//数量
                    order: 'id',//排序字段
                    sort: 'desc' //排序方式
                };
                this.getData();
            },
            // 删除操作
            deleteSingle(row) {
                // 二次确认删除
                this.$confirm('确定要删除该数据吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    let that = this;
                    this.$http.post(this.deleteUrl, {
                        ids: row.id
                    }).then(res => {
                        if (res.code === 200) {
                            that.$message.success('删除成功');
                            //选中的数据清空
                            that.clearSelect();
                            //刷新表格数据
                            that.getData();
                        }
                    });
                });
            },
            // 批量删除
            deleteBatch() {
                const length = this.multipleSelection.length;
                if (length === 0) {
                    this.$message.error('请选中数据');
                    return;
                }
                //id列表拼接
                let ids = '';
                for (let i = 0; i < length; i++) {
                    if (ids !== '') {
                        ids += ',';
                    }
                    ids += this.multipleSelection[i].id;
                }
                // 二次确认删除
                this.$confirm('确定要删除' + length + '条数据吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    let that = this;
                    this.$http.post(this.deleteUrl, {
                        ids: ids
                    }).then(res => {
                        if (res.code === 200) {
                            that.$message.success('批量删除成功');
                            //选中的数据清空
                            that.clearSelect();
                            //刷新表格数据
                            that.getData();
                        }
                    });
                });
            },
            //搜索框折叠
            toggleSearch(){
                this.search=!this.search;
            },
            //取消选中
            clearSelect() {
                this.$refs.multipleTable.clearSelection();
            },
            // 打开窗口
            openWin(type, row) {
                this.form = row;
                this.id=row.id;
                //修改
                if (type === 1) {
                    this.updateVisible = true;
                    //添加
                } else if (type === 2) {
                    this.createVisible = true;
                    //查看
                } else if (type === 3) {
                    this.showVisible = true;
                }
            },
            //关闭窗口
            closeWin(flush) {
                this.updateVisible = false;
                this.createVisible = false;
                this.showVisible = false;
                if (flush){
                    this.getData();
                }
            },
            // 多选操作
            selectChange(val) {
                this.multipleSelection = val;
            },
            // 点击行触发，选中或不选中复选框
            rowClick(row, column, event) {
                this.$refs.multipleTable.toggleRowSelection(row);
            },
            // 排序方式
            sort(column) {
                if (column.order === 'ascending') {
                    this.$set(this.query, 'sort', 'asc');
                } else {
                    this.$set(this.query, 'sort', 'desc');
                }
                this.$set(this.query, 'order', column.prop.replace(/([A-Z])/g, '_$1').toLowerCase());
                this.$set(this.query, 'pageNo', 1);
                this.getData();
            },
            // 页码选择
            pageChange(val) {
                this.$set(this.query, 'pageNo', val);
                this.getData();
            },
            // 数量选择
            sizeChange(val) {
                this.$set(this.query, 'pageNo', 1);
                this.$set(this.query, 'pageSize', val);
                this.getData();
            }
        },
        filters: {
            //时间格式过滤器
            formatDateShort: function(value) {
                if (!value) {
                    return '';
                }
                return moment(value).format('YYYY-MM-DD');
            }
        }
    };
</script>

<style scoped>

    .float-right{
        float: right;
    }

    .handle-search{
        margin-bottom: 15px;
    }

    .handle-box {
        margin-bottom: 15px;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .orange {
        color: orange;
    }

    .mr{
        margin: 8px;
    }

    .search-date{
        width: 190px;
    }

    .search-select{
        width: 120px;
    }

    .search-input {
        width: 150px;
        display: inline-block;
    }
</style>
